<?php
require_once('../libraryfiles/config.php');
$number = $_GET['number'];
$productViewNumber = array();
$productName = array();
$sql = "SELECT " . Tblproduct::top_view . ", " . Tblproduct::name . " FROM " . Tblproduct::tblproduct . " ORDER BY " . Tblproduct::top_view . " DESC LIMIT " . $number;
$topViewerProduct = mysql_query($sql);
if($topViewerProduct){
	while($productInfo = mysql_fetch_assoc($topViewerProduct)){
		$productName[] = $productInfo[Tblproduct::name];
		$productViewNumber[] = $productInfo[Tblproduct::top_view];
	}
}

$productViewNumber = implode(',', $productViewNumber);
$productName = implode(',', $productName);
echo '<input type="hidden" id="productName" value="'. $productName . '" />';
echo '<input type="hidden" id="productData" value="'. $productViewNumber . '" />';
?>
<script type="text/javascript">
$(function () {
		var productName = $('#productName').val().split(',');
		var productData = $('#productData').val().split(',');
		// convert array string to array integer
		var amoucne = productData.length;
		for ( var i = 0; i < amoucne; i ++) {
			productData[i] = parseInt(productData[i])
		}
		$('#report').highcharts({
			chart: {
				type: 'column',
				margin: [ 50, 50, 100, 80]
			},
			title: {
				text: 'Popular Product'
			},
			xAxis: {
				categories: productName,
				labels: {
					rotation: -45,
					align: 'right',
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif'
					}
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Viewer (amounce)'
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				pointFormat: 'Viewer amounce <b>{point.y:.1f} </b>',
			},
			series: [{
				name: 'Province',
				data: productData,
				dataLabels: {
					enabled: true,
					rotation: -90,
					color: '#FFFFFF',
					align: 'right',
					x: 4,
					y: 10,
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif',
						textShadow: '0 0 3px black'
					}
				}
			}]
		});
	});
</script>
<div id="report" style="width: 100%; height: 300px; margin: 0 auto"></div>